//给第一个下拉框设置下拉样式
var seljd = document.querySelector('#jd')
var xhr = new XMLHttpRequest()
xhr.open('get', 'http://chst.vip:1234/api/getgsshop')
xhr.send()
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        var x = JSON.parse(xhr.responseText).result
        var html = ""
        x.forEach((item, index) => {
            html += ` <option value="${index}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${item.shopName}</option>`
        });
        seljd.innerHTML = html
        //给下拉框手写获取新的商品信息
        seljd.onchange = function () {
            var m = seljd.value
            console.log(m)
            fn(m, n)
        }
    }
}
//给第二个下拉框设置下拉样式
var selhb = document.querySelector('#hb')
var xhr2 = new XMLHttpRequest()
var z
var w
xhr2.open('get', 'http://chst.vip:1234/api/getgsshoparea')
xhr2.send()
xhr2.onreadystatechange = function () {
    if (xhr2.status === 200 && xhr2.readyState === 4) {
        var x2 = JSON.parse(xhr2.responseText).result

        var html2 = ""
        x2.forEach((item, index) => {
            //z为地区简写的集合
            z += item.areaName.substr(0, 2)

            html2 += ` <option value="${index}">&nbsp;&nbsp;&nbsp;&nbsp;${item.areaName}</option>`
            // w为地区长写的集合
            w += item.areaName
        });
        var changxie = [...w].splice(9)
        // console.log(changxie)
        selhb.innerHTML = html2
        var wenben = [...z].splice(9)
        //给下拉框手写获取新的商品信息
        selhb.onchange = function () {

            var n = selhb.value
            //    console.log(n)

            var selhbopt = $('nav>#hb>option')
            console.log(selhbopt)
            //选中地区之后，名字会简写
            selhbopt.eq(n).text(wenben[n * 2] + wenben[n * 2 + 1])

            //其他的地区，名字恢复长写          
        //     console.log(selhbopt.eq(n).index())
        //     var shanchu= selhbopt.splice(n,1)
        //      console.log(selhbopt.splice(n,1))
        //     //  console.log(selhbopt.length-1)
        //   var changxiebian=changxie  
        //   changxie.splice(n*10,10) 
        //   console.log(changxie.splice(n*10,10))
       
        //    var shunxu=0
        //    for(var shunxu;shunxu<=(selhbopt.length)-1;shunxu++){
        //        selhbopt.eq(shunxu).text(changxie[shunxu*10]+changxie[shunxu*10+1]+changxie[shunxu*10+2]+changxie[shunxu*10+3]+changxie[shunxu*10+4]+changxie[shunxu*10+5]+changxie[shunxu*10+6]+changxie[shunxu*10+7]+changxie[shunxu*10+8]+changxie[shunxu*10+9])
        //        console.log(selhbopt.eq(shunxu).text())
        //    }
          
        //    selhbopt.push(shanchu)
        //  changxie.push(changxiebian[n*10]+changxiebian[n*10+1]+changxiebian[n*10+2]+changxiebian[n*10+3]+changxiebian[n*10+4]+changxiebian[n*10+5]+changxiebian[n*10+6]+changxiebian[n*10+7]+changxiebian[n*10+8]+changxiebian[n*10+9])
        //  console.log(changxie)
            fn(m, n)
        }
       

    }
}
//ajax请求商品信息
var m = 0
var n = 0
function fn(m, n) {
    var secul = document.querySelector('section>ul')
    var xhr3 = new XMLHttpRequest()
    xhr3.open('get', 'http://chst.vip:1234/api/getgsproduct?shopid=' + m + '&areaid=' + n)
    xhr3.send()
    xhr3.onreadystatechange = function () {
        if (xhr3.status === 200 && xhr3.readyState === 4) {
            var x3 = JSON.parse(xhr3.responseText).result
            var html3 = ""
            x3.forEach((item => {
                html3 += `<li>
             <img src="${item.productImg}" alt="">
             <div>${item.productName}</div>
             <p>${item.productPrice}</p>
         </li>`
            }))
            secul.innerHTML = html3
            //给li添加点击刷新页面事件
            var secli = $('section>ul>li')
            secli.click(function () {
                location.reload()
            })
        }
    }
}
fn(m, n)

//书写返回index.html功能
var fanhui = document.querySelector('header>a')
fanhui.onclick = function () {
    location.href = "../index.html"
}